<template>
  <div>黑马92期--{{ obj.count }}, {{ obj.name }}</div>
  <div>
    <button @click="updateCount">修改count</button>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  setup() {
    // 1. reactive主要是针对与对象的。 ref 主要针对 所有类型
    const obj = reactive({ count: 1, name: 'zs' });
    const obj2 = ref(1);
    const obj3 = ref({ aaa: 123, bbb: 456 });

    const updateCount = () => {
      obj.count += 10;
      obj.name = '修改后';

      // 如果使用ref来定义对象的话，在js里面需要 通过。value属性去访问。模板里面不需要
      console.log(obj, obj3.value);
    };

    return {
      obj,
      updateCount,
    };
  },
};
</script>
